<template>
    <div>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>动态信息</span>
                </div>
            </template>
            <el-form :model="data.dynamicDetail" :rules="rules" ref="examineRef">
                <el-form-item label="内容" label-width="130px">
                    <el-input :autosize="{ minRows: 10, maxRows: 10 }" v-model="data.dynamicDetail.content"
                              autocomplete="off" type="textarea"/>
                </el-form-item>
                <el-form-item label="发布人" label-width="130px">
                    <el-input v-model="data.dynamicDetail.publishUserNickName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="发布学校" label-width="130px">
                    <el-input v-model="data.dynamicDetail.publishSchoolName" autocomplete="off"/>
                </el-form-item>
                <el-form-item label="动态类型" label-width="130px">
                    <el-tag
                        type="info"
                        disable-transitions
                        v-if="data.dynamicDetail.type === 1"
                    >悄悄话
                    </el-tag>
                    <el-tag
                        type="info"
                        disable-transitions
                        v-if="data.dynamicDetail.type === 2"
                    >提问
                    </el-tag>
                </el-form-item>
                <el-form-item label="是否开启评论" label-width="130px">
                    <el-tag
                        type="success"
                        disable-transitions
                        v-if="data.dynamicDetail.isOpenComment"
                    >开启
                    </el-tag>
                    <el-tag
                        type="danger"
                        disable-transitions
                        v-if="!data.dynamicDetail.isOpenComment"
                    >关闭
                    </el-tag>
                </el-form-item>
                <el-form-item label="是否隐藏" label-width="130px">
                    <el-tag
                        type="warning"
                        disable-transitions
                        v-if="data.dynamicDetail.isHide"
                    >隐藏
                    </el-tag>
                    <el-tag
                        type="success"
                        disable-transitions
                        v-if="!data.dynamicDetail.isHide"
                    >显示
                    </el-tag>
                </el-form-item>
                <el-form-item label="标签" label-width="130px">
                    <el-space :size="5">
                        <el-tag
                            type="primary"
                            disable-transitions
                            v-for="labelName in data.dynamicDetail.labelNames" :key="labelName"
                        >{{labelName}}
                        </el-tag>
                    </el-space>
                </el-form-item>
                <el-form-item label="动态图片" label-width="130px">
                    <div class="demo-image" v-for="image in data.dynamicDetail.images" :key="image">
                        <el-image style="width: 100px; height: 100px" :src="image" fit="fit"
                                  :preview-src-list="data.dynamicDetail.images"/>
                    </div>
                </el-form-item>
                <el-form-item label="审核状态" label-width="130px" prop="examineStatus">
                    <el-tag class="ml-2" type="primary" v-if="data.dynamicDetail.status === 1">待审核</el-tag>
                    <el-tag class="ml-2" type="danger" v-if="data.dynamicDetail.status === 2">未通过</el-tag>
                    <el-tag class="ml-2" type="success" v-if="data.dynamicDetail.status === 3">已通过</el-tag>
                </el-form-item>
                <el-form-item label="最近未通过原因" label-width="130px" prop="noPassReason">
                    <el-input v-model="data.dynamicDetail.latestNoPassReason" autocomplete="off" type="textarea"/>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                    <span>动态审核记录</span>
                </div>
            </template>
            <el-table :data="data.dynamicExamineRecords" style="width: 100%">
                <el-table-column prop="examineAdminName" label="审核员" width="180"/>
                <el-table-column prop="examineAdminName" label="是否通过" width="180">
                    <template #default="scope">
                        <el-tag class="ml-2" type="success" v-if="scope.row.isPass">通过</el-tag>
                        <el-tag class="ml-2" type="danger" v-if="!scope.row.isPass">未通过</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="noPassReason" label="未通过原因" width="180"/>
                <el-table-column prop="createTime" label="审核时间"/>
            </el-table>
        </el-card>
    </div>
</template>

<script>
import {onMounted, reactive} from "vue";
import {useRoute} from "vue-router";
import {detail} from "@/api/dynamic/dynamic";
import {list} from "@/api/dynamic/dynamicExamineRecord";

export default {
    setup() {
        const data = reactive({
            dynamicDetail: '',
            dynamicExamineRecords: [],
            total: 0
        })
        const route = useRoute()
        const dynamicDetail = async () => {
            detail(route.query.uuid).then(res => {
                data.dynamicDetail = res.data
            })
        }
        /**
         * 分页查询动态审核记录
         */
        const pageDynamicExamineRecord = () => {
            list(route.query.uuid).then(res => {
                data.dynamicExamineRecords = res.data;
            })
        }
        onMounted(() => {
            dynamicDetail()
            pageDynamicExamineRecord()
        })
        return {
            data,
        }
    }
}
</script>

<style scoped>
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 14px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: auto;
}
</style>